<template>
  <view class="container">
    <view class="toolbar" @tap="format" style="overflow-y: auto">
      <view
        :class="formats.bold ? 'ql-active' : ''"
        class="iconfont icon-zitijiacu"
        data-name="bold"
      ></view>
      <view
        :class="formats.italic ? 'ql-active' : ''"
        class="iconfont icon-zitixieti"
        data-name="italic"
      ></view>
      <view
        :class="formats.underline ? 'ql-active' : ''"
        class="iconfont icon-zitixiahuaxian"
        data-name="underline"
      ></view>
      <view
        :class="formats.align === 'left' ? 'ql-active' : ''"
        class="iconfont icon-zuoduiqi"
        data-name="align"
        data-value="left"
      ></view>
      <view
        :class="formats.align === 'center' ? 'ql-active' : ''"
        class="iconfont icon-juzhongduiqi"
        data-name="align"
        data-value="center"
      ></view>
      <view
        :class="formats.align === 'right' ? 'ql-active' : ''"
        class="iconfont icon-youduiqi"
        data-name="align"
        data-value="right"
      ></view>
      <view
        :class="formats.align === 'justify' ? 'ql-active' : ''"
        class="iconfont icon-zuoyouduiqi"
        data-name="align"
        data-value="justify"
      ></view>
      <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
      <view
        :class="formats.fontFamily ? 'ql-active' : ''"
        class="iconfont icon-font"
        data-name="fontFamily"
        data-value="Pacifico"
      ></view>
      <view
        :class="formats.list === 'bullet' ? 'ql-active' : ''"
        class="iconfont icon-wuxupailie"
        data-name="list"
        data-value="bullet"
      ></view>
      <view class="iconfont icon-undo" @tap="undo"></view>
      <view class="iconfont icon-redo" @tap="redo"></view>
      <view class="iconfont icon-charutupian" @tap="insertImage"></view>
      <view class="iconfont icon-shanchu" @tap="clear"></view>
    </view>
    <view class="editor-wrapper">
      <scroll-view scroll-y>
        <editor
          id="editor"
          class="ql-container"
          :placeholder="placeholder"
          @statuschange="onStatusChange"
          :show-img-resize="true"
          @ready="onEditorReady"
          @input="getCtx"
        ></editor>
      </scroll-view>
    </view>
  </view>
</template>
 
<script>
import { baseURL } from '@/utils/http'
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      readOnly: false,
      placeholder: '开始输入...',
      formats: {},
      serverUrl: 'https://www.baidu.com/api/file/upload', // 图片上传 - 接口
    }
  },
  methods: {
    readOnlyChange() {
      this.readOnly = !this.readOnly
    },
    onfocus() {
      uni.showKeyboard
    },
    onEditorReady() {
      // 富文本节点渲染完成
      const query = uni.createSelectorQuery().in(this)
      query
        .select('#editor')
        .context((res) => {
          this.editorCtx = res.context
          if (this.value) {
            this.editorCtx.setContents({
              html: this.value,
            })
          }
        })
        .exec(this)
    },
    // 失去焦点时，获取富文本的内容
    getCtx(e) {
      this.$emit('input', e.detail.html)
    },
    undo() {
      this.editorCtx.undo()
    },
    redo() {
      this.editorCtx.redo()
    },
    format(e) {
      let { name, value } = e.target.dataset
      // if (!name) return
      // console.log('format', name, value)
      this.editorCtx.format(name, value)
    },
    onStatusChange(e) {
      const formats = e.detail
      this.formats = formats
    },
    insertDivider() {
      this.editorCtx.insertDivider({
        success: function () {
          console.log('insert divider success')
        },
      })
    },
    clear() {
      this.editorCtx.clear({
        success: function (res) {
          console.log('clear success')
        },
      })
    },
    removeFormat() {
      this.editorCtx.removeFormat()
    },
    insertDate() {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate,
      })
    },
    insertImage() {
      var that = this
      uni.chooseImage({
        success(res) {
          uni.uploadFile({
            url: baseURL + '/upload',
            filePath: res.tempFilePaths[0],
            name: 'image',
            success: (uploadFileRes) => {
              let path = JSON.parse(uploadFileRes.data)
              //后端返回的地址，存入图片地址
              that.editorCtx.insertImage({
                width: '100%',
                height:'auto',
                src: path.data,
              })
            },
          })
        },
      })
    },
  },
  onLoad() {
    uni.loadFontFace({
      family: 'Pacifico',
      // source: url('./iconfont.ttf')
    })
  },
}
</script>
 
<style lang="scss">
@import './editor-icon.css';
/* 
.page-body {
  height: calc(100vh - var(--window-top) - var(--status-bar-height))-100rpx;
}
.container {
  width: 100%;
  flex: 1;
}
.wrapper {
}

.editor-wrapper {
  height: calc(100vh - var(--window-top) - var(--status-bar-height) - 200px);
  background: #eee;
} */
.container {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

.toolbar {
  height: 160rpx;
  border-top: 1rpx solid #ccc;
}
.editor-wrapper {
  height: calc(100vh - 400rpx);
}

scroll-view {
  width: 100%;
}
.iconfont {
  line-height: 80rpx;
  text-align: center;
  display: inline-block;
  padding: 4px 4px;
  width: 65rpx;
  height: 80rpx;
  cursor: pointer;
  font-size: 24px;
  font-weight: normal;
  color: #817e7e;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.ql-container {
  box-sizing: border-box;
  padding: 8rpx;
  width: 100%;
  min-height: 30vh;
  height: 100%;

  font-size: 16px;
  line-height: 1.5;
}

.ql-active {
  color: #f04142;
}
</style>